<template>
  <div>
    <el-card class="margin">
      <typeNav @getCategoryList="getCategoryList" ref="typeNav"></typeNav>
    </el-card>
    <el-card>
      <div v-show="isShow">
        <el-button
          type="primary"
          icon="el-icon-plus"
          :disabled="category3Id ? false : true"
          @click="addAttr"
          >添加属性</el-button
        >
        <el-table border class="margin" :data="categoryList">
          <el-table-column type="index" label="序号"></el-table-column>
          <el-table-column label="属性名称" prop="attrName"></el-table-column>
          <el-table-column label="属性列表">
            <template slot-scope="scope">
              <el-tag
                class="tag"
                v-for="attrValue in scope.row.attrValueList"
                :key="attrValue.id"
                >{{ attrValue.valueName }}</el-tag
              >
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                type="warning"
                class="el-icon-edit"
                size="mini"
                @click="updateAttr(scope.row)"
              ></el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 添加属性区域 -->
      <div v-show="!isShow">
        <el-form :model="attrForm">
          <el-form-item label="属性名">
            <el-input
              v-model="attrForm.attrName"
              style="width: 200px"
            ></el-input>
          </el-form-item>
        </el-form>
        <el-button
          type="primary"
          icon="el-icon-plus"
          :disabled="!attrForm.attrName ? true : false"
          @click="addAttrValue"
          >添加属性值</el-button
        >
        <el-button @click="cancel1">取消</el-button>
        <el-table border class="margin" :data="attrForm.attrValueList">
          <el-table-column label="序号" type="index"></el-table-column>
          <el-table-column label="属性值名称">
            <template slot-scope="scope">
              <el-input
                v-model="scope.row.valueName"
                placeholder="请输入属性值"
                size="mini"
                ref="inputRef"
                v-if="scope.row.flage"
                @blur="lookSpan(scope.row)"
              >
              </el-input>
              <span
                v-else
                style="display: block"
                @click="lookInput(scope.row)"
                >{{ scope.row.valueName }}</span
              >
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="{ row, $index }">
              <el-popconfirm
                @onConfirm="deleteValueName($index)"
                :title="`确定删除${row.valueName}吗?`"
              >
                <el-button slot="reference" type="danger" size="mini"
                  >删除</el-button
                >
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
        <el-button type="primary" @click="saveAttrInfo">保存</el-button>
        <el-button @click="cancel2">取消</el-button>
      </div>
    </el-card>
  </div>
</template>

<script>
// 引入深拷贝
import cloneDeep from "/node_modules/lodash/cloneDeep.js";
export default {
  data() {
    return {
      categoryList: [],
      category3Id: "",
      isShow: true,
      // 收集表单数据
      attrForm: {
        attrName: "", // 收集属性名称
        attrValueList: [], //收集属性值
        categoryId: 0, // 就是3id
        categoryLevel: 3,
      },
    };
  },
  methods: {
    getCategoryList(list, id) {
      this.category3Id = id;
      this.categoryList = list;
    },
    addAttr() {
      this.isShow = false;
      // 禁用三级联动
      this.$refs.typeNav.disabled = true;
      this.attrForm = {
        attrName: "",
        attrValueList: [],
        categoryId: this.category3Id,
        categoryLevel: 3,
      };
    },
    // 添加属性值按钮
    addAttrValue() {
      if (this.attrForm.attrName.trim() == "")
        return this.$message.error("属性名称不能为空");
      this.attrForm.attrValueList.push({
        attrId: this.attrForm.id,
        valueName: "", // 收集属性值名称
        flage: true,
      });
      this.$nextTick(() => {
        this.$refs[this.attrForm.attrValueList.length - 1].focus();
      });
    },
    // 点击修改图标
    updateAttr(row) {
      this.isShow = false;
      this.$refs.typeNav.disabled = true;
      row.attrValueList.forEach((item) => {
        item.flage = false;
      });
      this.attrForm = cloneDeep(row);
    },
    lookSpan(row) {
      if (row.valueName.trim() == "") {
        this.$message.error("属性值不能为空");
      } else {
        let isRepat = this.attrForm.attrValueList.some((item) => {
          if (row !== item) return row.valueName == item.valueName;
        });
        if (isRepat) {
          this.$message.error("不能输入两个相同的属性值");
        } else {
          row.flage = false;
        }
      }
    },
    lookInput(row) {
      row.flage = true;
      this.$nextTick(() => {
        this.$refs.inputRef.focus();
      });
    },
    cancel1() {
      this.attrForm.attrName = "";
    },
    cancel2() {
      this.attrForm.attrName = "";
      this.attrForm.attrValueList = [];
      this.isShow = true;
    },
    deleteValueName(index) {
      this.attrForm.attrValueList.splice(index, 1);
    },
    async saveAttrInfo() {
      if (!this.attrForm.attrName || !this.attrForm.attrValueList[0].valueName)
        return this.$message.error("不能保存一个空值");
      this.attrForm.attrValueList = this.attrForm.attrValueList.filter(
        (item) => {
          if (item.valueName) {
            delete item.flage;
            return true;
          }
        }
      );
      try {
        await this.$Api.attr.reqSaveInfo(this.attrForm);
        this.$message.success("保存成功");
        this.isShow = true;
        this.$refs.typeNav.disabled = false;
        this.getCategoryList();
      } catch (error) {}
    },
  },
};
</script>

<style lang="scss" scoped>
.tag {
  margin: 3px 10px;
}
</style>
